<template>
  <el-menu
    active-text-color="white"
    background-color="rgb(52, 53, 78)"
    class="el-menu-vertical-demo"
    default-active="2"
    text-color="#fff"
    router="true"
    @open="handleOpen"
    @close="handleClose"
  >
    <el-sub-menu index="1" class="t">
      <template #title>
        <el-icon><location /></el-icon>
        <span>管理1</span>
      </template>

      <el-menu-item index="/home/1-1">1.1</el-menu-item>
      <el-menu-item index="/home/1-2">1.2</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="2" class="t">
      <template #title>
        <el-icon><icon-menu /></el-icon>
        <span>管理2</span>
      </template>

      <el-menu-item index="/home/2-1">2.1</el-menu-item>
      <el-menu-item index="/home/2-2">2.2</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="3" class="t">
      <template #title>
        <el-icon><document /></el-icon>
        <span>管理3</span>
      </template>

      <el-menu-item index="/home/3-1">3.1</el-menu-item>
      <el-menu-item index="/home/3-2">3.2</el-menu-item>
    </el-sub-menu>

    <el-menu-item index="/home/4" class="t">
      <el-icon><setting /></el-icon>
      <span>管理4</span>
    </el-menu-item>
  </el-menu>
</template>

<script  setup>
import { ref } from "vue";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from "@element-plus/icons-vue";

const isCollapse = ref(false);
const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};
</script>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 165px;
  height: 520px;

  background-color: rgb(49, 33, 79);
  border: 2px solid rgb(129, 112, 112);
}
el-menu-item {
  height: 200px;
}
.t {
  border-bottom: 1px solid rgb(129, 112, 112);
  border-right: 1px solid rgb(129, 112, 112);
  border-left: 1px solid rgb(129, 112, 112);
}
</style>

